<template>
  <section class="content">
    <div class="row center-block">
      <div>
        <mywizard :steps="steps" :editable='editable' :onNext="nextClicked" :onBack="backClicked">
          <div slot="page1">
            <h4>基础信息</h4>
            <UserInfo ref="userinfo" :editable='editable' :userInfo="this.editUser.data.userInfo"></UserInfo>
          </div>
          <div slot="page2">
            <h4>补充信息</h4>
            <ExtraInfo ref="extrainfo" :editable='editable' :extrainfo="this.editUser.data.extrainfo"></ExtraInfo>
          </div>
          <div slot="page3">
            <h4>家庭及社会关系</h4>
            <Social ref="socialInfo" :editable='editable' :relations="this.editUser.data.relations"></Social>
          </div>
          <div slot="page4">
            <h4>在职培训</h4>
            <Training :editable='editable' ref="training" :trainings="this.editUser.data.trainings"></Training>
          </div>
          <div slot="page5">
            <h4>在职进修学历(学位)教育</h4>
            <FurtherEdu :editable='editable' ref="furtherEdu" :educations="this.editUser.data.parttimeEdus"></FurtherEdu>
          </div>
          <div slot="page6">
            <h4>专业技术职务</h4>
            <ProfessionTech :editable='editable' ref="professionTech" :professionTechs="this.editUser.data.professionTechs"></ProfessionTech>
          </div>
          <div slot="page7">
            <h4>活动(竞赛)</h4>
            <Race :editable='editable' ref="race" :races="this.editUser.data.races"></Race>
          </div>
          <div slot="page8">
            <h4>参与工程项目建设</h4>
            <Project :editable='editable' ref="project" :projects="this.editUser.data.projects"></Project>
          </div>
          <div slot="page9">
            <h4>年度考核</h4>
            <KPI :editable='editable' ref="kpi" :kpis="this.editUser.data.kpis"></KPI>
          </div>
        </mywizard>
      </div>
    </div>
  </section>
</template>
<script>
import Vue from 'vue'
import UserInfo from '../mycomponents/users/UserInfo'
import Training from '../mycomponents/users/Training'
import ExtraInfo from '../mycomponents/users/ExtraInfo'
import Mywizard from '../mycomponents/wizards/MyWizard'
import Social from '../mycomponents/users/Social'
import FurtherEdu from '../mycomponents/users/FurtherEdu'
import ProfessionTech from '../mycomponents/users/ProfessionTech'
import Race from '../mycomponents/users/Race'
import Project from '../mycomponents/users/Project'
import KPI from '../mycomponents/users/KPI'
require('moment')
Vue.component(Mywizard.name, Mywizard)
Vue.use(Mywizard)

export default {
  name: 'UserView',
  props: ['userData'],
  components: {
    Mywizard,
    UserInfo,
    ExtraInfo,
    Social,
    Training,
    FurtherEdu,
    ProfessionTech,
    Race,
    Project,
    KPI
  },
  datetime() {
    return new Date()
  },
  watch: {
    userData() {
      this.editUser = this.userData
    }
  },
  data() {
    return {
      editable: false,
      steps: [
        {
          label: '基础信息',
          slot: 'page1'
        },
        {
          label: '补充信息',
          slot: 'page2'
        },
        {
          label: '家庭及社会关系',
          slot: 'page3'
        },
        {
          label: '在职培训信息',
          slot: 'page4'
        },
        {
          label: '在职进修学历(学位)教育',
          slot: 'page5'
        },
        {
          label: '专业技术职务',
          slot: 'page6'
        },
        {
          label: '活动(竞赛)信息',
          slot: 'page7'
        },
        {
          label: '工程项目建设情况参与信息',
          slot: 'page8'
        },
        {
          label: '年度考核信息',
          slot: 'page9'
        }
      ]
    }
  },
  created(){
    this.editUser = this.userData
  },
  methods: {
    nextClicked(currentPage) {
      console.log('next clicked', currentPage)
      if (currentPage == 0) {
        this.userData.userInfo = this.$refs.userinfo.getData()
      }
      if (currentPage == 1) {
        this.userData.extrainfo = this.$refs.extrainfo.getData()
      }
      console.log('userData:' + JSON.stringify(this.userData))
      return true
    },
    backClicked(currentPage) {
      console.log('back clicked', currentPage)
      return true
    },
    clearInput(vueModel) {
      vueModel = ''
    },
    clearName() {
      //this.name = ''
    },
    submit(e) {
      //this.names.push(this.name)
      //this.name = ''
      console.log('user data:' + JSON.stringify(this.userData))
    }
  }
}
</script>

<style>
@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: "\f0dc";
}

table.dataTable thead .sorting_asc:after {
  content: "\f0dd";
}

table.dataTable thead .sorting_desc:after {
  content: "\f0de";
}

.fade {
  opacity: 0;
}

.datetime-picker input {
  height: 2.5em !important;
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}

.show {
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.modal-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  margin-top: 150px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

.modal-body {
  padding: 0px 30px 0px 0px;
}

h5,
h5 {
  font-size: 2rem;
}

.datetime-picker input {
  height: 2.5em !important;
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}


/* .modal-open .modal {
  padding-top: 130px;

} */

modal.fade .modal-dialog {
  padding-top: 80px;
}

@media screen and (min-width: 768px) {
  .modal-dialog {
    width: 80%;
    margin: 10px auto;
  }
}
</style>
